<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- html标签身上添加原生DOM -->
    <button @click="test">点击</button>
    <!-- html标签身上添加自定义事件 无意义 -->
    <button @xxx="test1">点击</button>
    <!-- 组件标签身上添加原生DOM  .native这个事件添加给了组件的根元素，就形成了事件委派-->
    <Event1 @click.native="test2">test2</Event1>
    <!-- 给组件标签添加自定义事件 -->
    <Event2 @haha="test3" @click="test4">test3</Event2>


  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'
  export default {
    name: 'EventTest',
    components: {
      Event1,
      Event2,
    },
    methods: {
      test(event){
        console.log(event.target.innerHTML);       
      },
          test1(event){
        console.log(event.target.innerHTML);        
      },
      test2(){
        console.log(event.target.innerHTML);
      },   
      test3(event){
        console.log(event);
        
      } ,
          test4(event){
        console.log(event);
        
      }    
    }
  }
</script>
